/**
* 功能描述: 滑动选择器demo
* @author 崔孝楠
* @date 2022/9/28 13:35
* @version 1.0
*/
<template>
  <div>
    <!-- 横向滑动选择器 -->
    <div class="yw-slider yw-slider-with-marks" style="position: relative; top: 50px">
      <!-- 全部轨道 -->
      <div class="yw-slider-rail"></div>
      <!-- 激活部分轨道 -->
      <div class="yw-slider-track" style="left: 0%; right: auto; width: 30%;"></div>
      <!-- 间隔点 -->
      <div class="yw-slider-step">
        <span class="yw-slider-dot yw-slider-dot-active" style="left: 0;" />
        <span class="yw-slider-dot yw-slider-dot-active" style="left: 26%;" />
        <span class="yw-slider-dot" style="left: 37%;" />
        <span class="yw-slider-dot" style="left: 100%;" />
      </div>
      <!-- 拖拽点 -->
      <div class="yw-slider-handle"
           id="handle"
           style="left: 30%; right: auto; transform: translateX(-50%);"
           tabindex="0"
           @focus="addFocused('handle')"
           @blur="removeFocused('handle')"
      />
      <!-- 刻度标记 -->
      <div class="yw-slider-mark">
        <span class="yw-slider-mark-text yw-slider-mark-text-active" style="left: 0%;">0°C</span>
        <span class="yw-slider-mark-text yw-slider-mark-text-active" style="left: 26%;">26°C</span>
        <span class="yw-slider-mark-text" style="left: 37%;">37°C</span>
        <span class="yw-slider-mark-text" style="left: 100%; color: rgb(255, 85, 0);">
          <strong data-v-3ada7ae6="">100°C</strong>
        </span>
      </div>
    </div>

    <!-- 纵向滑动选择器 -->
    <div class="yw-slider yw-slider-with-marks yw-slider-vertical" style="display: inline-block; height: 300px; margin-left: 70px; top: 80px;">
      <!-- 全部轨道 -->
      <div class="yw-slider-rail"></div>
      <!-- 激活部分轨道 -->
      <div class="yw-slider-track" style="bottom: 0%; top: auto; height: 30%;"></div>
      <!-- 间隔点 -->
      <div class="yw-slider-step">
        <span class="yw-slider-dot yw-slider-dot-active" style="bottom: 0;" />
        <span class="yw-slider-dot yw-slider-dot-active" style="bottom: 26%;" />
        <span class="yw-slider-dot" style="bottom: 37%;" />
        <span class="yw-slider-dot" style="bottom: 100%;" />
      </div>
      <!-- 拖拽点 -->
      <div class="yw-slider-handle"
           id="handleVertical"
           style="bottom: 30%; top: auto;"
           tabindex="0"
           @focus="addFocused('handleVertical')"
           @blur="removeFocused('handleVertical')"
      />
      <!-- 刻度标记 -->
      <div class="yw-slider-mark">
        <span class="yw-slider-mark-text yw-slider-mark-text-active" style="bottom: 0%;">0°C</span>
        <span class="yw-slider-mark-text yw-slider-mark-text-active" style="bottom: 26%;">26°C</span>
        <span class="yw-slider-mark-text" style="bottom: 37%;">37°C</span>
        <span class="yw-slider-mark-text" style="bottom: 100%; color: rgb(255, 85, 0);">
          <strong data-v-3ada7ae6="">100°C</strong>
        </span>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  name: "index",
  methods: {
    /**
     * 添加聚焦样式
     * @param id 元素id
     */
    addFocused(id) {
      let handle = document.getElementById(id)
      handle.classList.add('yw-slider-handle-focused')
    },
    /**
     * 移除聚焦样式
     * @param id 元素id
     */
    removeFocused(id) {
      let handle = document.getElementById(id)
      handle.classList.remove('yw-slider-handle-focused')
    },
  }
}
</script>

<style scoped>

</style>
